<template>
    <div class="main">
       <p>{{msg}}</p>
         <el-table
            :data="tableData"
            border
            style="width: 100%;"
            default-expand-all
            >
            <el-table-column
              type="expand"
              width="60"
            >
             <!-- <div style="margin:8px;">
                <el-tree
                :data="rightsData"
                show-checkbox
                default-expand-all
                highlight-current
                node-key="id"
                ref="tree"
                :props="defaultProps">
              </el-tree>
             </div> -->
               <template slot-scope="props">
                  <div>
                    <!-- <el-checkbox 
                      :indeterminate="props.row.isIndeterminate" 
                      v-model="props.row.checkAll" 
                      @change="handleCheckAllChange(props.row)"
                      >全选12
                    
                    </el-checkbox> -->
                    
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group 
                      v-model="props.row.checkedRights">
                      <el-checkbox v-for="right in props.row.rights" :label="right" :key="right">{{right}}</el-checkbox>
                    </el-checkbox-group>
                    </div>
                  
              </template>
            </el-table-column>

            <el-table-column
                type="index"
                width="50"
                >
            </el-table-column>
            <el-table-column
                prop="groupname"
                label="UserGroupName"
                width="180"
                >
            </el-table-column>
            <!-- <el-table-column
                prop="groupmembers"
                label="UserGroupMembers"
                width="320"
                >
            </el-table-column> -->
            <el-table-column
                prop="creationTime"
                label="CreationDate"
                >
            </el-table-column>
            <el-table-column
                label="Operation"
                >
                <template slot-scope="scope">
                <!--  点击编辑按钮 -->
                <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                    size="mini">Edit123</el-button>
                    <!-- scope.row获取到的是你点击的那一行对象的所有数据 -->
                <el-button
                    icon="el-icon-delete"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                    id="delete"
                    :disabled="scope.row._id=='Q8JKdJj2furggT2uv'"
                    >Delete</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>
<script>
import {Meteor} from 'meteor/meteor';
import {UserGroup,Right} from '/imports/collections/collection'
// const cityOptions = ['管理员', '普通用户1', '普通用户2', '普通用户3'];

import { Tracker } from 'meteor/tracker'

export default {
    data() {
      return {
        UserGroupData:[],
        rightsData:[],
        editData:{},
        msg: 'sdfasfasf123',
        tableData: [{
          _id:"FunfXEao4ceYicC99",
          checkAll:false,
          checkedRights:[],
          creationTime:"2019-09-25 10:24:31",
          groupname:"test222",
          isIndeterminate:true,
          permissionName:[],
          rights:['1','2','3']
        }]
      }
    },
    mounted () {
      Tracker.autorun(() => {

          this.UserGroupData=UserGroup.find().fetch();
          this.rightsData = Right.find().fetch();
      });
      var that=this;
      var timeout=setTimeout(function(){
        that.initPage();
        },500)
      
    },
     meteor: {
    // Subscriptions - Errors not reported spelling and capitalization.
      $subscribe: {
        'right': [],
        'userGroup': []
      }
    },
    methods:{
      initPage(){

       
       
        // this.tableData=UserGroup.find({}).fetch()
        // this.tableData=[];
        // this.tableData.pop();
        this.tableData.push({
          _id:"FunfXEao4ceYicCcE",
          checkAll:false,
          checkedRights:[],
          creationTime:"2019-09-25 10:24:31",
          groupname:"test555",
          isIndeterminate:true,
          permissionName:[],
          rights:['1','2','3']

        })

        var UserGroupData,rightsData

          console.log('rightsData:',this.rightsData);
          var rightArr=[];
          for(let s=0;s<this.rightsData.length;s++){
            rightArr.push(this.rightsData[s].permissionName)
          }
          

          for(var i=0;i<this.UserGroupData.length;i++){
            var oneObj={};
            console.log('UserGroupData[i]',this.UserGroupData[i])
            oneObj = this.UserGroupData[i]
            
            oneObj.rights=[];
            oneObj.rights =  oneObj.rights.concat(rightArr)
            oneObj.checkAll=false;
            oneObj.isIndeterminate=true;
            oneObj.checkedRights=[];
            let newObj = Object.assign(oneObj)
            this.tableData.push(newObj)
            // if(i<this.pageSize){
            //     this.tableData.push(oneObj)
            // }
          }
    }
  }
}
</script>
